<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1+2=12</title>
	</head>
	<body>
		<p>数字1：</p>
		<input id="n1" type="text">
		<p>数字2：</p>
		<input id="n2" type="text>">
		<!--按钮的点击事件，执行add函数-->
		<br/>
		<br/>
		<input id="btn" type="button" value="求和" onclick="add()">
		<p id="sum"></p>
		
		<script>
			function add(){
				/*
				 * 1、获取2个文本框输入的内容
				 * 2、相加的结果放入<p>
				 */
				var num1=document.getElementById('n1');
				var num2=document.getElementById('n2');
				var sum=document.getElementById('sum');
				//不管输入的是字符串还是数字，都会处理成string 所以变成字符串连接
				
				var result=num1.value+num2.value;
				//强制类型转换
				
				result=parseInt(num1.value)+parseInt(num2.value);
				//强制类型转换2：parseFalse（）转成浮点型
				//输入非数字的话 1+a=null
				result=parseFloat(num1.value)+parseFloat(num2.value);
				//强制类型转换3：number（）
				//输入整数浮点型都可以3+3=6.3
				//输入非数字的话3a+3.3=NaN
				result=Number(num1.value)+Number(num2.value);
				//考虑用户输入不合适的情况，当用户输入非数字时，弹出提示框
				if(isNaN(num1.value)){
					alert("第一个数字不合法，是非数字型");
					
				}else if(isNaN(num2.value)){
					alert("第二个数字不合法，是非数字型");
				}else{
				sum.innerHTML=(num1.value)+"+"+(num2.value)+"="+result;
			          }
			}
		</script>
	</body>
</html>
